// 导入 react 依赖包
import React, { Component } from 'react';
import ReactDOM from 'react-dom/client';

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 函数组件內，给元素添加事件处理函数
const App = () => {
  function clickHandler1() {
    console.log('函数定义事件处理');
  }

  const clickHandler2 = () => {
    console.log('箭头函数事件处理');
  };

  return (
    <div>
      {/* 匿名函数 */}
      <button onClick={() => console.log('匿名事件处理')}>按钮1</button>
      <button onClick={clickHandler1}>按钮2</button>
      <button onClick={clickHandler2}>按钮3</button>
    </div>
  );
};

// 渲染的时候，一定要大些字母开头，以此来区分 React 自定义组件和 html 原生标签
root.render(<App />);
